<template>
  <div>
    <el-card style="margin-bottom: 20px">
      <el-form :model="formData">
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="司机账号：" label-width="100px" prop="account">
              <el-input
                v-model="formData.account"
                placeholder="请输入司机账号"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="司机姓名：" label-width="100px" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入司机姓名"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="司机手机号：" label-width="110px" prop="phone">
              <el-input
                v-model="formData.phone"
                placeholder="请输入司机手机号"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-left: 30px">
          <el-col :span="6">
            <el-form-item label="所属机构：" label-width="110px" prop="agentId">
              <!--              <el-input-->
              <!--                v-model="formData.agentId"-->
              <!--                placeholder="请输入所属机构"-->
              <!--                style="width: 200px"-->
              <!--              ></el-input>-->
              <el-select
                ref="selectRef"
                v-model="formData.agentId"
                placeholder="请选择所属机构"
                style="width: 200px"
              >
                <el-option
                  :value="formData.agentId"
                  :label="label"
                  style="height: auto"
                >
                  <el-tree
                    :data="treeData"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                  >
                  </el-tree>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="margin-left: 100px">
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="resetFn">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{ background: '#f8faff' }"
      >
        <el-table-column type="index" label="序号" width="70">
        </el-table-column>
        <el-table-column prop="userId" label="司机账号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="司机姓名" width="180">
        </el-table-column>
        <el-table-column prop="mobile" label="司机电话" width="180">
        </el-table-column>
        <el-table-column prop="truck.licensePlate" label="关联车辆" width="180">
        </el-table-column>
        <el-table-column prop="agency.name" label="所属机构" width="180">
        </el-table-column>
        <el-table-column prop="workStatus" label="工作状态">
          <template #default="{ row }">
            <div
              v-if="row.workStatus === 1"
              style="
                display: inline-block;
                background-color: #1dc779;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-right: 5px;
              "
            ></div>
            <div
              v-else
              style="
                display: inline-block;
                background-color: #e15536;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-right: 5px;
              "
            ></div>
            {{ row.workStatus === 1 ? "上班" : "休息" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="{ row }">
            <el-button type="text" style="color: #419eff">查看</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              style="color: #419eff"
              @click="configurationCar(row)"
              >配置车辆</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" style="margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="list.page"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="list.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <el-dialog
      title="车辆配置"
      :visible.sync="dialogVisible"
      width="40%"
      top="30vh"
    >
      <div style="margin: 0 20px">
        <div>配置车辆需满足以下条件：</div>
        <el-row type="flex" justify="left" style="margin: 15px 0">
          <span style="margin-right: 70px">① 司机信息已完善</span>
          <span>② 司机已设置排班</span>
        </el-row>
        <div>③ 司机绑定车辆未在启用状态</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickFn1">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="配置车辆" :visible.sync="dialogShow" width="50%">
      <el-card shadow="never" style="background: #fbfafa; border: unset">
        <div style="margin: 0 30px">
          <el-row type="flex">
            <el-col :span="12">
              <!--              driverInfo.id-->
              <div>司机编号：{{ driverInfo.id }}</div>
            </el-col>
            <el-col :span="12">
              <!--              driverInfo.name-->
              <div>司机名称：{{ driverInfo.name }}</div>
            </el-col>
          </el-row>
          <el-row type="flex" style="margin-top: 10px">
            <el-col :span="12">
              <!--              driverInfo.moblie-->
              <div>司机电话：{{ driverInfo.mobile }}</div>
            </el-col>
            <el-col :span="12">
              <!--              driverInfo.agency.name-->
              <div>所属机构：{{ agencyName }}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-row style="margin: 20px 5px">
        配置车辆：
        <!--        <el-select>-->
        <!--          <el-option></el-option>-->
        <!--        </el-select>-->
      </el-row>
      <el-table
        :data="dialogTableData"
        style="width: 100%; border: 1px solid #ebeef5"
        :header-cell-style="{ background: '#f8faff' }"
      >
        <el-table-column prop="date" label="车牌号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="车辆状态" width="180">
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center">
          <template #default>
            <el-button type="text" style="color: #419eff">查看</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" style="color: #f78787">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="clickFn2">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getDriverListApi } from "@/api/employees";
import { getTreeListApi } from "@/api/organization-manage";

export default {
  name: "OperationalRangePage",
  data() {
    return {
      // dialogTableData1: "",
      driverInfo: {},
      dialogTableData: [{}],
      dialogShow: false,
      dialogVisible: false,
      defaultProps: {
        label: "name",
        children: "children",
      },
      treeData: [],
      label: "",
      formData: {
        phone: "",
        name: "",
        account: "",
        agentId: "",
      },
      tableData: [],
      list: {
        page: 1,
        pageSize: 10,
      },
      total: 0,
      agencyName: "",
    };
  },
  created() {
    this.getDriverList();
    this.getTreeList();
  },
  methods: {
    clickFn2() {
      this.dialogShow = false;
    },
    async clickFn1() {
      this.dialogVisible = false;
      this.dialogShow = true;
      console.log(this.driverInfo);
      console.log(this.agencyName);
      // console.log(this.dialogTableData1);
      // const res = await getDriverInfoApi(this.driverId);
      // console.log(res);
    },
    // 配置车辆
    configurationCar(row) {
      console.log(row);
      this.dialogVisible = true;
      this.driverInfo = row;
      this.driverId = row.id;
      console.log(this.driverId);
      this.agencyName = row.agency.name;
      // this.dialogTableData1 = row.truck;
    },
    // 重置
    resetFn() {
      (this.formData = {
        phone: "",
        name: "",
        account: "",
        agentId: "",
      }),
        (this.label = "");
      this.getDriverList();
    },
    handleNodeClick(data) {
      // console.log(data);
      this.label = data.name;
      this.formData.agentId = data.id;
      this.$refs.selectRef.blur();
    },
    // 搜索
    async search() {
      const res = await getDriverListApi({ ...this.list, ...this.formData });
      // console.log(res);
      this.tableData = res.data.items;
      this.total = +res.data.counts;
    },
    async getDriverList() {
      const res = await getDriverListApi(this.list);
      console.log(res);
      this.tableData = res.data.items;
      this.total = +res.data.counts;
    },
    handleSizeChange(a) {
      this.list.pageSize = a;
      this.getDriverList();
    },
    handleCurrentChange(a) {
      this.list.page = a;
      this.getDriverList();
    },
    async getTreeList() {
      const { data: res } = await getTreeListApi();
      // console.log(res);
      this.treeData = JSON.parse(res);
      // console.log(this.treeData);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-dialog__body {
  padding: 10px 20px;
}
</style>
